<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>员工列表</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <%--引入jquery--%>
    <%--引入css样式--%>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>


<div class="container">
    <fieldset>
        <legend class="layui-field-title">员工信息</legend>
        <!-- 设置条件查询框 -->
        <div class="row">
            <div class="col-md-5 col-md-offset-2">
                <form class="form-inline" id="conditionalForm">
                    <div class="form-group" style="margin: 0.1em">
                        <label for="InputName" style="margin: 0.3em">员工姓名:</label>
                        <input type="text" class="form-control" id="InputName" placeholder="请输入员工姓名" name="empName">
                    </div>
                    <div class="form-group" style="margin: 0.1em">
                        <label style="margin: 0.3em">部门:</label>
                        <select class="form-control" name="dId" id="dept_query_select">
                            <option value="0">--请选择--</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="col-md-5 ">
                <button type="submit" class="btn btn-primary" id="condition_button">查询</button>
                <button type="submit" class="btn btn-danger" id="condition_reset_button">重置条件/返回</button>
            </div>
        </div>

    </fieldset>
    <%--    按钮--%>
    <div class="row">
        <div class="col-md-9">
            <button class="btn btn-primary btn-sm" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger btn-sm" id="emp_delete_all_btn">删除</button>
        </div>
        <%--            分页文字信息--%>
        <div class="col-md-3" id="page_info_area">

        </div>
    </div>



<script type="text/javascript">

    var totalRecord,currentPage,currentDept;
    currentDept = 0;
    <%--页面加载完成之后，直接发送一个ajax请求，要到分页数据--%>
    $(function (){
        //跳转到首页
        to_page(1);
    })

    //跳转到指定的页面,发送ajax请求，获取json数据
    function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn=" + pn + "&" + $('#conditionalForm').serialize(),
            type:"GET",
            //result获取到了返回的Msg对象(JSON数据)
            success:function (result){
                //重新显示下拉列表的部门信息
                getDepts2("#conditionalForm select");
                console.log(result);
                //    1、请求成功解析并显示员工信息
                build_emps_table(result);
                //    2、解析并显示分页信息
                build_page_info(result);
                //    3、解析显示分页条数据
                build_page_nav(result);
            }
        })
    }

    /**
     * 发送ajax请求，查询部门信息，以json格式返回
     * 加个请选择在里面，再查出所有的部门信息并显示在下拉列表里
     */
    function  getDepts2(ele){
        //清空之前下拉列表的值
        $(ele).empty();
        var optionEle = $("<option></option>").append("--请选择--").attr("value",0);
        //加入到ele对象中，这里传入的是查询表单对应的id值中select元素：#conditionalForm select
        optionEle.appendTo(ele);
        getDepts_Real(ele);
        $(ele).val(currentDept);
    }

   /*将返回的json字符串传入ele参数中，遍历加入到下拉列表中*/
    function getDepts_Real(ele){
        $.ajax({
            //不加这一条可能会在修改的时候部门信息显示错误
            async:false,
            url:"${APP_PATH}/depts",
            type:"GET",
            success:function (result){
                //在页面控制台中显示传入来的数据
                console.log(result);
                //显示部门信息在下拉列表中
                $.each(result.extend.depts,function(){
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    optionEle.appendTo(ele);
                })
            }
        })
    }


    /**********************条件查询****************************/
    // 提交模糊查询条件
    $("#condition_button").click(function (){
        to_page(1);
    });

    // 重置查询条件
    // 重置查询条件
    $('#condition_reset_button').click(function () {
        var element = $('#conditionalForm')[0];
        $('#conditionalForm')[0].reset();
        currentDept = 0;
        to_page(1);
    });



</script>


</body>
</html>